<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>支付方式</title>
    <link href="../css/common.css" rel="stylesheet">
    <link href="../css/base.css" rel="stylesheet">
    <link href="../carts/css/carts.css" rel="stylesheet">
    <link href="css/orderCompletion.css" rel="stylesheet">
</head>
<body>

<header id="header"></header>
<div id="nav-header">
    <div class="show-box" style="width: 1200px;margin: 0 auto">
        <div class="main-head">
            <span class="cart-logo" onclick="location.href='../view/index.html'" ></span>

        </div>

        <p class="my-cart"> 支付方式</p>

        <div class="pay-methods">
                <span class="pay-login-name">迷雾森林</span><em>|</em><span>支付方式</span>

        </div>
        <div class="ZZHT-clear"></div>
    </div>

</div>
<section class="ZZHT-container">
    <!--<div class="order-msg">-->
        <!--<div class="order-wait clearfix">-->
            <!--<i class="order-ok"></i>-->
            <!--<ul>-->
                <!--<li>-->
                    <!--<div style="color: #494949;font-size: 17px;margin-bottom: 10px">订单已完成 快去付款吧</div>-->
                    <!--<div style="color: #a9a9a9;margin-bottom: 10px;"> 订单在30分钟有效，超时自动取消</div>-->
                    <!--<p class="order-fold">订单详情 <span class="icons icon-active"></span></p>-->
                <!--</li>-->
            <!--</ul>-->
            <!--<div style="margin-right: 40px;margin-top: 25px"> 应付总额 :<span style="color: #ea5404;font-weight: bold ;font-size: 18px">{{invoiceClient.allPrice |formatMoney}}</span></div>-->
        <!--</div>-->
        <!--&lt;!&ndash; 折叠部分的内容&ndash;&gt;-->
        <!--<div class="zdie">-->
                <!--&lt;!&ndash;<p> <span class="zdie-header">订单编号:</span><span class="zdie-inner" v-for=" o in orderArr">{{o.orderId}}</span></p>&ndash;&gt;-->
            <!--<div class=" item-zdie flex">-->
                <!--<span class="zdie-header">商品名称:</span>-->
                <!--<div class="zdie-inner">-->
                    <!--<p style="margin-bottom: 5px"  v-for="o in orderArr">{{o.goodsName}}</p>-->

                <!--</div>-->
            <!--</div>-->
                <!--<div class="item-zdie"> <span class="zdie-header">收货地址:</span><span class="zdie-inner">{{invoiceClient.provinceName+''+invoiceClient.cityName+''+invoiceClient.areaName+''+invoiceClient.userAddress}}</span></div>-->
                <!--<div class="item-zdie"> <span class="zdie-header">发票抬头:</span><span class="zdie-inner">{{invoiceClient.invoiceClient}}</span></div>-->
                <!--<p class="item-zdie"> <span class="zdie-header">购买时间:</span><span class="zdie-inner">{{formatDate(new Date()).Y+'-'+formatDate(new Date()).M+'-'+formatDate(new Date()).D+'-'+formatDate(new Date()).h+':'+formatDate(new Date()).m}}</span></p>-->
        <!--</div>-->
    <!--</div>-->
    <!-- 支付方式-->
    <div class="pay-moment">
        <p class="pay-moment-header"> 支付方式</p>
        <ul class="pay-moment-body clearfix">
            <li :class="{'border-active':cur==i}" v-for="(m,i) in imgArr" @click="cur=i"><img :src="m" alt=""></li>

        </ul>
        <div class="line" style="width: 100%"></div>
        <form>
        <div class="pay-detail" v-show="cur==0">
            <p><span class="count-header">现金账户余额</span> <span class="count-money"> {{account.cash | formatMoney}}</span></p>
            <!--<p><span class="count-header">账户积分</span> <span class="count-money">{{account.score}}</span></p>-->
            <p><span class="count-header">本次扣款</span> <span class="count-money"> {{}}</span></p>
            <!--<p><span class="count-header">本次获得积分</span> <span class="count-money"> {{}}</span></p>-->
            <p><span class="count-header">交易密码</span><input type="password" v-model="password" required maxlength="6" @keyup.enter="cashPay"> <a style="vertical-align: bottom" href="../Usercenter/7-1.html">忘记密码?</a></p>
            <p><span class="count-header"></span> <input type="button" value="确认" @click="cashPay"></p>
        </div>
        <div class="pay-detail" v-show="cur==1">
            <p><span class="count-header">华宝数量</span> <span class="count-money"> {{account.huabao}}</span></p>
            <!--<p><span class="count-header">本次扣款</span> <span class="count-money"> {{account.score}}</span></p>-->
            <p><span class="count-header">服务费</span> <span class="count-money"> {{ plaqueArr.hbFee}}</span></p>
            <!--<p><span class="count-header">本次获得积分</span> <span class="count-money"> {{invoiceClient.defaultScore}}</span></p>-->
            <p><span class="count-header">交易密码</span><input type="password" v-model="password"> <a style="vertical-align: bottom" href="#none">忘记密码?</a></p>
            <p><span class="count-header"></span> <input type="button" value="确认" @click="cashPay"></p>
        </div>
        </form>
    </div>

</section>

<div id="ck1"></div>
<div id="ck3"></div>
<script src="../js/jquery.min.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/vue-resource.min.js"></script>
<script type="text/javascript" src="../js/qrcode.js"></script>
<script type="text/javascript" src="../plugin/layer/layer.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="../js/common_view.js"></script>
<script type="text/javascript" src="../js/ljf_base.js"></script>
<script>
    new Vue({
        el:".ZZHT-container",
        data:{
            account:{
                cash:0,//现金
                huabao:0, //华宝
                score:0
            },
            password:'',
            cur:0,
            orderArr:[],
            plaqueArr:JSON.parse(sessionStorage.plaque),
            orderIdArr:[],
            imgArr:['img/xj.png','img/hb.png','img/wx.png','img/alipay.png','img/kj.png','img/wg.png']

        },
        mounted:function(){
           this.$nextTick(function () {
               this.getCount()
            //   this.getProductOrder()
           })
        },

        filters:{
            formatMoney:function (val) {
                return '￥'+val
            },

        },
        computed:{

        },
        methods:{


            //获取地址蓝sktOrdersId
            getUrlParam: function(name, str) {
                var url;
                if (str) {
                    url = str.split("?")[1];
                } else {
                    url = window.location.search.replace("?", "");
                }
                url = url.split("&");
                var ret = {};
                url.forEach(function (o,i) {
                    var d = o.split("=");
                    ret[d[0]] = decodeURI(d[1]);
                });
                if (name)
                    return ret[name];
                else
                    return ret;
            },
            //允许支付的类型 2 现金账户支付 3开元宝支付 4第三方支付  6开元宝营业额
            //获取现金以及华宝余额
               getCount:function () {
                console.log( this.plaqueArr );
                this.$http.get(SURL+'/webAccount/getAccount',{params:{userId:localStorage.userId}}).then(function (res) {
                    if(res.body.messageCode=='200'){
                        this.account=res.body.entity

                    }
                })
            },

            //支付方式支付方式 1:线下现金支付 2 现金账户支付 3开元宝支付 4第三方支付 5混合支付 6开元宝营业额
            // orderId userId payType realMoney cash kaiyuan kaiyuanFee payPwd
            pay:function (params) {
                var pattern = /^\d{6}$/;
                if(pattern.test(this.password)){

                    this.$http.post(SURL+'/sktBuyplaque/enterBuyplaque',params,{emulateJSON : true}).then(function (res) {
                        // console.log(res);
                        if(res.body.messageCode=='200'){
                            if(res.body.entity.code=='01'){
                                layer.alert(res.body.entity.msg);
                                setTimeout(function () {
                                    //location.href="./orderCompletionOver.html"
                                },2000)

                            }else{

                                layer.alert(res.body.entity.msg)
                            }

                        }
                    })
                }else{
                    layer.alert('请填写6位正确密码')
                }

            },
            // orderId userId payType realMoney cash kaiyuan kaiyuanFee payPwd
            cashPay:function(){
                var params={
                    userId:localStorage.userId,
                    payPwd:this.password,
                    kaiyuan:0,
                    kaiyuanFee:0,
                    payType:1,
                    realMoney:0,//第三方支付如果不是传0
                     cash:this.account.cash,
                    orderId:JSON.parse(this.getUrlParam('plequeId')).orderId
                };
                this.pay(params)
            },
            huabaoPay:function(){
                var params={
                    userId:localStorage.userId,
                    payPwd:this.password,
                    kaiyuan:0,
                    kaiyuanFee:0,
                    payType:1,
                    realMoney:0,//第三方支付如果不是传0
                    cash:this.account.cash,
                    orderId:JSON.parse(this.getUrlParam('plequeId')).orderId
                };
                this.pay(params)
            },
            restOrder:function () {
                this.$http.get(SURL+'orders/')
            },
            formatDate: function(date, db) {
                var d = date ? new Date(date) : new Date();
                db = db ? db : false;
                var w = ["日", "一", "二", "三", "四", "五", "六"];
                var t = {
                    "Y": d.getFullYear(),
                    "M": d.getMonth() + 1,
                    "D": d.getDate(),
                    "W": d.getDay(),
                    "h": d.getHours(),
                    "m": d.getMinutes(),
                    "s": d.getSeconds()
                };
                d.setMonth(t.M);
                d.setDate(0);
                t["x"] = d.getDate();
                t["w"] = w[t.W];

                if (db) {
                    $.each(t, function(i, o) {
                        if ((i === "M" || i === "D" || i === "h" || i === "m" || i === "s") && o.toString().length == 1) {
                            t[i] = "0" + o.toString();
                        }
                    });
                }

                return t;
            },


            
        }

    })

    $(".order-fold").on('click',function () {
        $(this).find('.icons').toggleClass('icon-active')
        $('.zdie').slideToggle("slow");
    })

    $('.pay-methods').find('.pay-login-name').html(localStorage.loginName);




</script>
</body>
</html>